@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Do+Hyeon&display=swap");
:root {
  --bg-color: #fbf7f2;
  --font-color: black;
  --title-font: "Do Hyeon", sans-serif;
  --content-font: "Nanum Gothic", sans-serif;
}
body {
  height: auto;
  display: block;
  /* position: -webkit-sticky; */
  background-color: var(--bg-color);
  text-align: center;
  justify-content: center;
}

/* main start */

.main-header {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 400px;
  height: auto;
}

.main-link-div {
  margin: 0 auto;
  max-width: 500px;
}

.main-link-block {
  display: inline-block;
  margin: auto 0rem;
}

.test-main-img {
  margin: 0rem auto 0.5rem;
  width: 100%;
  max-width: 450px;
  display: block;
  cursor: pointer;
}

.PPL-Ads-link {
  margin: 3rem auto 0.5rem;
  max-width: 414px;
  cursor: pointer;
}

/* intro start */

.intro {
  margin: 0rem auto 2.5rem;
  padding: 0rem 0rem;
}

.intro-main-img {
  margin: 0rem auto;
  max-width: 550px;
  width: 100%;
  height: auto;
  font-family: var(--title-font);
  cursor: pointer;
}

.start-btn {
  height: 3.5em;
  width: 20rem;
}

.test-intro-with-friend {
  margin: 1.5rem auto 1rem;
  font-family: var(--title-font);
}

.test-intro-with-friend-btn {
  height: 6rem;
  width: auto;
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.test-intro-with-friend-btn:focus,
.test-intro-with-friend-btn:active,
.test-intro-with-friend-btn:visited,
.test-intro-with-friend-btn:hover {
  outline: none;
  outline-offset: none;
  box-shadow: none;
  background-color: var(--bg-color);
  border-color: var(--bg-color);
  color: var(--font-color);
}

.test-intro-to-main-img {
  cursor: pointer;
}

.start-btn-participants {
  margin: 0.5rem;
  font-size: 1rem;
  font-family: var(--title-font);
}

.intro-footer {
  margin: 3rem auto;
  font-family: var(--title-font);
  color: #cecfd0;
}

/* question & answer start */

.question {
  margin: 3rem 3rem 2rem 3rem;
  color: var(--font-color);
  font-family: var(--title-font);
}

.question-p {
  /* white space for line break */
  white-space: pre-line;
}

.option-btn-div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.option-btn:focus,
.option-btn:active,
.option-btn:visited {
  outline: none;
  outline-offset: none;
  box-shadow: none;
  background-color: var(--bg-color);
  color: var(--font-color);
}

/* unselect clicked btn */
.btn-outline-dark:hover {
  color: var(--font-color);
  background-color: var(--bg-color);
}

.option-btn {
  font-family: var(--content-font);
  font-weight: bolder;
  font-size: 0.8rem;
  height: 9em;
  width: 20rem;
  margin: 0.5em;
  word-break: keep-all;
  white-space: pre-line;
}

.question-progress {
  margin: 3rem 10rem;
  position: relative;
  display: block;
}

.progress-bar {
  height: 4px;
}

.question-count {
  margin-top: 1rem;
  color: var(--font-color);
  font-size: 1.3rem;
  font-family: var(--title-font);
}

.answer-option-img {
  margin: 0rem auto 2rem;
  max-width: 414px;
}

/* for birthday Calculating */
.birth-title {
  margin: 2rem auto;
}
.birth-input {
  font-family: var(--title-font);
  margin: 5rem 2rem;
}

.birthday-submit-btn {
  margin: 3rem 1rem;
}

.private-info-desc {
  color: #cecfd0;
}

/* for storyTelling Quiz */
.storytelling-img {
  height: auto;
  width: 23rem;
  margin: 1rem auto;
}

/* loading start */

.loading {
  margin-top: 12rem;
  margin-bottom: 3rem;
}

.loading-upper {
  /* for strange number display, color change */
  color: var(--bg-color);
}

/* for DualMBTI Quiz */
.dualColor-title {
  margin: 2rem auto;
}
.dualColor-input {
  font-family: var(--title-font);
  margin: 5rem auto;
}
.dualColor-input-group {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dualColor-eachForm {
  margin: 0rem 1rem;
}

.dualMBTI-submit-btn {
  margin: 3rem 1rem;
}

.to-personalColor-test-btn {
  margin: 0rem auto 2rem;
}

/* result start */
.result {
  max-width: 100%;
  margin: 0rem 1rem 1rem 1rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.result-value {
  margin: 0rem 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  word-break: normal;
}

.result-card {
  width: 20rem;
}

.result-title {
  font-family: var(--title-font);
}

.result-p {
  text-align: left;
  font-family: var(--content-font);
  white-space: pre-line;
  word-break: keep-all;
  font-size: 0.9rem;
  margin: 1.5rem auto;
}

.result-header {
  margin: 5rem auto 2rem;
  font-family: var(--title-font);
  margin: 1rem 0.5rem;
  color: var(--font-color);
}

.result-img {
  height: auto;
  width: 23rem;
  margin: 0rem auto 0.5rem;
  font-family: var(--title-font);
  color: var(--font-color);
}

/* in Result Page for PPL banner */
.ppl-banner-img {
  width: 23rem;
  margin: 0.5rem auto;
}

/* in Result Page for Personal Color Test */
.to-peopleColor-test-banner-text {
  font-family: var(--title-font);
}
.to-peopleColor-test-banner-img {
  max-width: 414px;
}

.to-personalColorOut-test-banner-text {
  font-size: 1rem;
  font-family: var(--title-font);
  margin: 0.1rem auto;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.share-title {
  font-family: var(--title-font);
  margin: 0rem 1.5rem 1.5rem 1.5rem;
  color: var(--font-color);
}

.share {
  font-family: var(--title-font);
  display: inline;
  margin: 1rem 0.3rem 0rem;
}

.share-btn {
  height: 6rem;
  width: auto;
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.share-btn:focus,
.share-btn:active,
.share-btn:visited,
.share-btn:hover {
  outline: none;
  outline-offset: none;
  box-shadow: none;
  background-color: var(--bg-color);
  border-color: var(--bg-color);
  color: var(--font-color);
}

.re-test-btn {
  font-family: var(--title-font);
  display: inline;
  margin: 3rem 1rem;
}

.re-test-btn-img {
  cursor: pointer;
}

.back-to-main {
  font-family: var(--title-font);
  display: inline;
  margin: 1.5rem 1rem 0rem;
}

.back-to-main-btn-img {
  cursor: pointer;
}

/* result guide start */

.guide-desc {
  color: var(--font-color);
  margin: 10rem 5rem 5rem 5rem;
}
